<template>
  <div class="md:flex">
    <template v-for="(item, index) in utensilValue" :key="item.title">
      <Card size="small" :loading="loading" :title="item.title" class="md:w-1/4 w-full !md:mt-0 !mt-4 custom-card-height"
        :class="[index + 1 < 4 && '!md:mr-4']" :canExpan="false">
        <template #extra>
          <!-- <Tag :color="item.color"></Tag> -->
        </template>
        <div class="py-4 px-4 flex justify-between">
                   <!-- 记住要将后端传来的string转为number，否则无法渲染 -->
          <CountTo prefix="" :startVal="0" :endVal="parseInt(item.total)" class="text-5xl" :color="item.color" />
          <!-- <Icon :icon="item.icon" :size="40" /> -->
        </div>      

      </Card>
    </template>
  </div>
</template>
<script lang="ts" setup>
import { ref, onMounted } from 'vue';
import { CountTo } from '/@/components/CountTo/index';
import {  Card } from 'ant-design-vue';
import { defHttp } from '/@/utils/http/axios';

defineProps({
  loading: {
    type: Boolean,
  },
});
const utensilValue = ref([]);

onMounted(async () => {
  getValue();
});

// 查询后端统计数据
async function getValue() {
  const res = await defHttp.get({ url: '/utensil/labUtensil/query' });
  console.log("res", res);
  utensilValue.value = res;
}


</script>
<style>
.custom-card-height {
  height: 200px;
  /* 设置高度为200像素 */
}
</style>
